<!-- 首页 -->
<template>
  <div class="home-page">
    <div class="swiper-container" :style="{'height':swiperHeight+'px'}">
      <div class="sanjiao">
        <img src="../../assets/sanjiao.png" alt="">
        <img src="../../assets/down.png" alt="" class="down-jiantou">
      </div>
      <div class="swiper-wrapper">
        <div class="swiper-slide box1">
          <div>
            <span>欢迎访问</span>
            <span>牛津国际教育集团</span>
            <div class="line1"></div>
            <span>WELCOME TO OXFORD INTERNATIONAL</span>
          </div>
          <div>
            <span>学无止境<br>Learning without Limits</span>
          </div>
        </div>
        <div class="swiper-slide box2">
          <div>
            <span>学校&学院</span>
            <span>英国知名大学GCSE、A-Level、BTEC课程及嵌入式学院</span>
          </div>
          <div>
            <span>更多详情</span>
          </div>
        </div>
        <div class="swiper-slide box3">
          <div>
            <span>合作大学</span>
            <span>通向英国高等教育的桥梁：国际联合学位课程</span>
          </div>
          <div>
            <span>更多详情</span>
          </div>
        </div>
      </div>
      <!-- Add Pagination -->
<!--      <div class="swiper-pagination"></div>-->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
    <div class="jieshao">
      <div class="jieshao-box">
        <span class="cibiao">欢迎访问</span>
        <span class="zhubiao">牛津国际教育集团</span>
        <span class="zhengwen">
          牛津国际教育集团是一家独具特色、经资质认证的教育服务提供商，致力于为世界各地的学生提供内容充实、受益终生的学习体验。我们在英国、加拿大和美国开设面向成人和青少年学生的英语语言学校、私立寄宿学校、短期学术课程、大学预科课程、TESOL教师培训课程和各类线上课程。</span>
        <span class="zhengwen">我们注重课程质量，致力于成为教育服务领域首屈一指的服务提供商。我们的工作团队热情、敬业、志同道合，满腔热忱对待我们的工作。</span>
        <span class="zhengwen">而且，大家都是非常友善的人。</span>
      </div>
    </div>

    <!--新闻-->
    <div class="news-box">
      <div class="news-box-rongqi">
        <span class="news-biaoti">最新动态</span>
        <div class="news-main">
          <div class="news-details" v-for="(i,index) in 4">
            <div class="news-pic">
              <img src="../../assets/message-ceo.jpg" alt="">
            </div>
            <div class="news-dec">
              <span class="news-title">女性领导：北美地区总经理Sharon Curl访谈</span>
              <div class="line"></div>
              <span class="news-dec1" style="word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">美国和加拿大即将迎来感恩节，我们期待和北美区总经理Sharon Curl共同回顾一下女性在教育领域的领导地位......</span>
            </div>

<!--            <span>阅读全文</span>-->
          </div>
        </div>
      </div>
    </div>

  </div>
</template>


<script>
// import {getHomeBannerList, getHotKeyWord} from '@/api/home'
// import {getZhengcefaguiList,getnewsXaingqign} from '@/api/zhengcefagui'
import swiper from '../../assets/swiper/swiper-bundle.min'
export default {
  components: {

  },
  props: {},
  data() {
    return {
      searchData: '',
      bannerList: null,
      hotKeyWord: null,
      noticeNav: 1,
      noticeList: null,
      disclaimers: null,
      swiperHeight:0
    }
  },
  computed: {

  },
  watch: {},
  methods: {
    // swiper
  },
  created() {
    let H = window.innerHeight

    this.swiperHeight = H
  },
  mounted() {
    var swiper = new Swiper('.swiper-container', {
      // spaceBetween: 30,
      centeredSlides: true,
      /*autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },*/
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  }
}
</script>


<style lang='less' scoped>

  .swiper-container {
    width: 100%;
    height: 1000px;
    position: relative;
  }
  .sanjiao{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    z-index: 222;
    img{
      width: 120px;
      display: block;
    }
    span{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      display: block;
      text-align: center;
      color: #303030;
      z-index: 999;
    }
    .down-jiantou {
      position: absolute;
      left: 50%;
      margin-left: -19px;
      bottom: 9px;
      width: 38px;
      animation: shangxia 0.7s linear infinite;
    }
    @keyframes shangxia {
      0% {bottom: 9px}
      50%{bottom: 3px}
      100%{bottom: 9px}
    }
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    height: 100%;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  /*.swiper-slide>div:nth-of-type(1) span{
    background: rgba(255,255,255,.8);
    padding: 15px 20px;
    font-size: 32px;
    color: #303030;
    font-weight: 300;
  }*/
  .swiper-slide>div:nth-of-type(1){
    margin: 60px 0;
    margin-bottom: 35px;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,.65);
    padding: 20px 35px;
  }
  .swiper-slide>div:nth-of-type(1) span:nth-of-type(1){
    font-size: 17px;
    color: #303030;
    margin-bottom: 20px;
  }
  .swiper-slide>div:nth-of-type(1) span:nth-of-type(2){
    font-size: 25px;
    font-weight: bold;
    color: #303030;
  }
  .swiper-slide>div:nth-of-type(2){
    display: flex;
    flex-direction: column;
    padding: 10px 40px;
    background: #303030;transition: all .4s ease;cursor: pointer;
  }
  .swiper-slide>div:nth-of-type(2) span{



    line-height: 32px;
    font-size: 18px;
    color: #fff;
  }
  .swiper-slide>div:nth-of-type(2):hover{
    background: #3281c4;
  }
  .box{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*padding-top: 100px;*/
  }
  .box1{
    background: url("../../assets/UP-1.jpg") no-repeat center center;
  }
  .box2{
    background: url("../../assets/UP-2.jpg") no-repeat center center;
  }
  .box3{
    background: url("../../assets/UP-3.jpg") no-repeat center center;
  }
  .box4{
    background: url("../../assets/UP-4.jpg") no-repeat center center;
  }
/*.home-page{
  height: 1200px;
  background: url("../../assets/UP-1.jpg") no-repeat center fixed ;
}*/


  .jieshao{
    .jieshao-box{
      width: 730px;
      margin: 0 auto;
      padding: 60px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      .cibiao{
        font-size: 25px;
        font-weight: 300;
        line-height: 35px;
        color: #303030;
        margin-bottom: 20px;
      }
      .zhubiao{
        font-size: 35px;
        font-weight: bold;
        line-height: 55px;
        color: #303030;
        margin-bottom: 30px;
      }
      .zhengwen{
        font-size: 20px;
        line-height: 45px;
        font-weight: 300;
        color: #303030;
        margin-bottom: 35px;
      }
    }
  }

.news-box{
  background: url("../../assets/news_background.jpg") no-repeat center center;
}
  .news-box-rongqi{
    width: 900px;

    margin: 0 auto;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    .news-biaoti{
      font-size: 30px;
      line-height: 45px;
      font-weight: 700;
      text-align: center;
      display: block;
      padding-bottom: 20px;
      position: relative;
      color: #fff;
    }
    .news-biaoti:before{
      content: '';
      position: absolute;
      width: 5%;
      height: 4px;
      /*background: #303030;*/
      background: #fff;
      left: 50%;
      transform: translateX(-50%);
      bottom: 8px;
    }
    .news-main{
      margin-top: 60px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;

    }
  }

  .news-pic{
    /*width: 384px;*/
    /*height: 150px;*/
    img{
      width: 100%;
      /*margin-bottom: 20px;*/
    }
  }
  .news-dec{
    padding: 10px 30px 20px 30px;
    position: relative;
  }
  .news-dec:before{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 50%;
    margin-left: -10px;
    background: #fff;
    top: -10px;
    transform: rotate(45deg);
    z-index: 999;
  }
  .news-details{
    background: #fff;
    transition: all 0.3s linear;

    /*padding: 15px;*/
    display: flex;
    cursor: pointer;
    transition: all .5s ease;
    flex-direction: column;
    width: 45%;
    font-size: 16px;
    margin-bottom: 80px;
    color: #303030;
    .news-title{
      display: flex;
      position: relative;
      font-weight: bold;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 25px;
      text-align: center;
      margin-top: 20px;
      /*margin-bottom: 30px;*/
    }
    .line{
      width: 10%;
      height: 3px;
      background: #303030;
      margin: 15px auto 15px auto;
    }

    .news-dec1{
      word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
      font-size: 13px;
      line-height: 35px;
      /*margin-bottom: 20px;*/
    }
    .news-more{
      text-align: right;
      font-size: 14px;
    }
  }
  .news-details:hover{
    /*background: rgba(255,255,255,.4);*/
    box-shadow: 0 0 20px rgba(0,0,0,.4);
  }


  .line1{
    width: 40px;
    height: 3px;
    background: #303030;
    margin: 15px auto;
  }
</style>
